<script setup>
import { ref, onMounted, getCurrentInstance, reactive, nextTick } from "vue";
import utils from "../utils/utils";
const { proxy } = getCurrentInstance();
const menuForm = ref({
  menuName: "",
  state: "1",
  menuState: 1,
});
const showModal = ref(false);
const menuList = ref([]);
const action = ref("add");
//表头
const columns = reactive([
  {
    label: "菜单名称",
    prop: "menuName",
  },
  {
    label: "图标",
    prop: "menuIcon",
  },
  {
    label: "权限标识",
    prop: "menuCode",
  },
  {
    label: "路由地址",
    prop: "path",
  },
  {
    label: "组件路径",
    prop: "component",
  },
  {
    label: "菜单状态",
    prop: "menuState",
    formatter(row) {
      return row.menuState === 1 ? "正常" : "停用";
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    formatter(row) {
      return utils.formatDate(row.createTime);
    },
  },
]);
const diaUserForm = ref({
  menuName: "",
  menuType: 1,
  menuState: 1,
  parentId: [null],
});
//规则
const rules = reactive({
  menuName: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
});
//列表数据
const getMenuList = async () => {
  let res = await proxy.$api.menuList(diaUserForm);
  console.log(res);
  menuList.value = res;
};
const handleReset = () => {
  proxy.$refs.form.resetFields();
};
const handleAdd = (type, row) => {
  showModal.value = true;
 console.log(type);
  if (type == 2) {
     console.log(row);
    diaUserForm.parentId = [...row.parentId, row._id].filter((item) => item);
  }
};
const handleEdit = (row) => {
  showModal.value = true;
  action.value = 'edit'
  nextTick(() => {
    Object.assign(diaUserForm.value, row)
  })
};
const handleCloseDialog = () => {
  proxy.$refs.dialogForm.resetFields();
  showModal.value = false;
};
const handleClose = () => {
  proxy.$refs.dialogForm.resetFields();
  showModal.value = false;
};

const handleSubmit = () => {
  proxy.$refs.dialogForm.validate( async (valid) => {
    console.log(valid+'------')
    if (valid) {
      let params ={
        ...diaUserForm.value,
        action: action.value
      };
      console.log(params);
      await proxy.$api.menuSubmit(params);
      showModal.value = false;
      proxy.$message.success("操作成功");
      proxy.$refs.dialogForm.resetFields();
      getMenuList();
    }
  });
};
const handleQuery = () => {
  menuForm.value.menuName = diaUserForm.value.menuName;
  menuForm.value.menuState = diaUserForm.value.menuState;
  getMenuList();
};
const handleDelete= async(_id)=>{
  console.log(_id)
  await proxy.$api.menuSubmit({_id,action:"delete"})
  proxy.$message.success("删除成功")
  getMenuList()
}
onMounted(() => {
  getMenuList();
});
</script>

<template>
  <div class="UserManager">
    <div class="UserManager-top">
      <el-form
        :inline="true"
        :model="menuForm"
        ref="form"
        class="UserManager-form"
      >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input
            v-model="menuForm.menuName"
            placeholder="请输入菜单名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="menuState">
          <el-select v-model="menuForm.state" placeholder="在职">
            <el-option label="正常" value="1"></el-option>
            <el-option label="停用" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button type="primary" @click="handleReset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="UserManager-main">
      <div class="UserManager-main-buttom">
        <el-button type="primary" @click="handleAdd(1)">创建</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="menuList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        row-key="_id"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column label="操作" class="btn">
          <template #default="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleAdd(2, scope.row)"
              >新增</el-button
            >
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row._id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="菜单新增"
      v-model="showModal"
      :before-close="handleCloseDialog"
      
    >
      <el-form
        class="adduser-form"
        :rules="rules"
        ref="dialogForm"
        :model="diaUserForm"
      >
        <el-form-item label="父级菜单" prop="parentId">
          <el-cascader
            v-model="diaUserForm.parentId"
            :options="menuList"
            :props="{ checkStrictly: true, value: '_id', label: 'menuName' }"
            clearable
            placeholder="系统管理"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="diaUserForm.menuType">
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="0">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label=" 菜单名称" prop="menuName">
          <el-input
            v-model="diaUserForm.menuName"
            placeholder="请输入菜单名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label=" 权限标识"
          prop="menuCode"
          v-show="diaUserForm.menuType == 0"
        >
          <el-input
            v-model="diaUserForm.menuCode"
            placeholder="请输入权限标识"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="菜单图标"
          prop="menuIcon"
          v-show="diaUserForm.menuType == 1"
        >
          <el-input
            v-model="diaUserForm.menuIcon"
            placeholder="请输入菜单图标"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="路由地址"
          prop="path"
          v-show="diaUserForm.menuType == 1"
        >
          <el-input
            v-model="diaUserForm.path"
            placeholder="请输入路由地址"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="组件路径"
          prop="component"
          v-show="diaUserForm.menuType == 1"
        >
          <el-input
            v-model="diaUserForm.component"
            placeholder="请输入组件路径"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="菜单状态"
          prop="menuState"
          v-show="diaUserForm.menuType == 1"
        >
          <el-radio-group v-model="diaUserForm.menuState">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
* {
  //   padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.UserManager {
  width: 100%;
  height: 100%;
  background-color: #dfdfdf;

  .UserManager-top {
    width: 100%;
    height: 100px;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 5px;

    .UserManager-form {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;

      .el-form-item {
        display: flex;
        align-items: center;

        .el-input {
          width: 200px;
          height: 40px;
        }

        .el-select {
          width: 200px;
          height: 40px;

          :deep(.el-select__wrapper) {
            height: 40px;
          }

          :deep(.el-select__selected-item) {
            padding: 10px;
            font-size: 14px;
          }
        }

        .el-button {
          width: 70px;
          height: 40px;
        }
      }
    }
  }

  .UserManager-main {
    width: 100%;
    height: calc(100% - 100px);
    background-color: #fff;

    .UserManager-main-buttom {
      width: 100%;
      height: 80px;
      padding: 20px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;

      .el-button {
        height: 40px;
        color: #fff;
      }

      .el-button:first-of-type {
        width: 70px;
        background-color: #409eff;
      }

      .el-button:last-of-type {
        width: 100px;
        background-color: #f56c6c;
      }
    }

    .pagination {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      padding: 20px;
    }
  }

  :deep(.el-dialog) {
    width: 500px;
    height: 500px;

    .adduser-form {
      // width: 200px;
      padding: 10px;
      height: 100%;
      display: flex;
      flex-direction: column;

      .el-form-item {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;

        label {
          width: 80px;
        }
      }
    }
  }
  :deep(.cell) {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      flex: 1;
    }
  }
}
</style>
